<!--  -->
<template>
<div class=''>


    <div style="width: 70%;height: 60px;background: white;border-radius: 4px">
        <el-date-picker
                style="margin-top: 15px;margin-left: 20px"
                v-model="month"
                type="month"
                placeholder="选择月">
        </el-date-picker>
    </div>


    <div>
        <ul style="list-style: none">
            <li style="float: left;margin-top: 20px">
                <div style="width: 220px;height: 100px;background: white;border-radius: 6px;overflow: hidden" :class="one" @click="updateCssOne">
                    <div style="text-align: center;margin-top: 18px;font-size: 25px">
                        {{ allPeople }}人
                    </div>
                    <div style="text-align: center;margin-top: 5px;font-size: 15px">
                        全部
                    </div>
                </div>
            </li>

            <li style="float: left;margin-top: 20px;margin-left: 100px">
                <div style="width: 220px;height: 100px;background: white;border-radius: 6px;overflow: hidden" :class="two"  @click="updateCssTwo">
                    <div style="text-align: center;margin-top: 18px;font-size: 25px">
                        {{ insuredPeople }}人
                    </div>
                    <div style="text-align: center;margin-top: 5px;font-size: 15px">
                        已参保
                    </div>
                </div>
            </li>

            <li style="float: left;margin-top: 20px;margin-left: 95px">
                <div style="width: 220px;height: 100px;background: white;border-radius: 6px;overflow: hidden" :class="three"  @click="updateCssThree" >
                    <div style="text-align: center;margin-top: 18px;font-size: 25px">
                        {{ tobeinsuredPeople }}人
                    </div>
                    <div style="text-align: center;margin-top: 5px;font-size: 15px">
                        待参保
                    </div>
                </div>
            </li>

            <li style="float: left;margin-top: 20px;margin-left: 100px">
                <div style="width: 220px;height: 100px;background: white;border-radius: 6px;overflow: hidden" :class="four"  @click="updateCssFour">
                    <div style="text-align: center;margin-top: 18px;font-size: 25px">
                        {{ suspensionPeople }}人
                    </div>
                    <div style="text-align: center;margin-top: 5px;font-size: 15px">
                        已停保
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <div style="width: 70%;height: 490px;background: white;margin-top: 150px;border-radius: 5px;overflow: hidden">
        <div style="width: 100%;height: 10%;background: white;border-bottom: 1px solid #E9E9E9;margin-top: 2px;font-size: 13px;line-height: 40px;font-weight: 580">
            &nbsp;&nbsp;&nbsp;&nbsp;增减人员
        </div>
        <div style="width: 100%;height: 86%">
            <!--数据-->
            <el-table
                    v-loading="listLoading"
                    border
                    :data="socialData"
                    element-loading-text="数据加载中"
                    fit
                    highlight-current-row
                    @selection-change="handleSelectionChange"
                    style="width: 95.9%;margin-top: 20px;margin-left: 30px">
                <el-table-column
                        align="center"
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="ozId"
                        label="序号"
                        width="55">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="bname"
                        label="姓名"
                        width="80">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="departmentName"
                        label="部门"
                        width="80">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="positionName"
                        label="岗位"
                        width="80">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="phone"
                        label="手机号"
                        width="100">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="number"
                        label="工号"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="idNumber"
                        label="证件号"
                        width="180">
                </el-table-column>
                <el-table-column label="状态" width="90"  align="center">
                    <template slot-scope="p">
                        <span v-if="p.row.insuranceStatus === 0">未参保</span>
                        <span v-if="p.row.insuranceStatus === 1">已参保</span>
                        <span v-if="p.row.insuranceStatus === 2">已停保</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="210">
                    <template slot-scope="scope">
                        <ul style="list-style: none">
                            <li style="float: left;margin-left: 10px">
                                <div v-if="scope.row.insuranceStatus === 0" style="color: #5E91F2">办理增员</div>
                            </li>

                            <li style="float: left;margin-left: 30px">
                                <div v-if="scope.row.insuranceStatus === 1" style="color: #5E91F2">调整</div>
                            </li>

                            <li style="float: left;margin-left: 10px">
                                <div v-if="scope.row.insuranceStatus === 1" style="color: #5E91F2">停保</div>
                            </li>

                            <li style="float: left;margin-left: 10px">
                                <div v-if="scope.row.insuranceStatus === 1" style="color: #5E91F2">加入台账</div>
                            </li>
                        </ul>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <el-pagination
                    :current-page.sync="page"
                    :page-size="pageSize"
                    :page-sizes="[8,15]"
                    :total="totals"
                    background
                    layout="total, sizes ,prev, pager, next, jumper"
                    style="padding: 20px 0; text-align: center"
                    @current-change="selAccountBystatus"
                    @size-change="handleSizeChange"
            />
        </div>
    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    //月份
    month:null,
    //样式切换
    one:"one1",
    two:"one1",
    three:"one1",
    four:"one1",
    listLoading:true,
    socialData:[],
    ids:[],
    page:1,
    pageSize:8,
    totals:null,
    status:null,
    //全部人数
    allPeople:null,
    //已参保人数
    insuredPeople:null,
    //待参保人数
    tobeinsuredPeople:null,
    //已停保人数
    suspensionPeople:null,
    count:0
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    //查询全部人员
    selAccountBystatus(){
      this.request.post("/staff/accounting/selAccountBystatus",{
            "page":this.page,
            "pageNum":this.pageSize,
            "status":this.status
      }).then(res=>{
          this.socialData = res.data.items
          this.totals = res.data.counts
          this.listLoading = false
          let allPeopleCount = 0
          let tobeinsuredPeopleCount = 0
          let insuredPeopleCount = 0
          let suspensionPeopleCount = 0
          this.count ++
          if(this.count == 1){
              this.request.get("/staff/accounting/selAllAccountBystatus")
              .then(res=>{
                  res.data.forEach(i=>{
                      allPeopleCount++;
                      if(i.insuranceStatus == 0){
                          tobeinsuredPeopleCount++;
                      }
                      if(i.insuranceStatus == 1){
                          insuredPeopleCount++;
                      }
                      if(i.insuranceStatus == 2){
                          suspensionPeopleCount++;
                      }
                  })
                  if(allPeopleCount!==0){
                      this.allPeople = allPeopleCount
                  }else {
                      this.allPeople = 0
                  }
                  if(tobeinsuredPeopleCount!==0){
                      this.tobeinsuredPeople = tobeinsuredPeopleCount
                  }else {
                      this.tobeinsuredPeople = 0
                  }
                  if(insuredPeopleCount!==0){
                      this.insuredPeople = insuredPeopleCount
                  }else {
                      this.insuredPeople = 0
                  }
                  if(suspensionPeopleCount!==0){
                      this.suspensionPeople = suspensionPeopleCount
                  }else {
                      this.suspensionPeople = 0
                  }
              })
          }
      })
    },
    //分页跳转数据
    handleSizeChange(pageSize) {
        this.pageSize = pageSize;
        this.selAccountBystatus();
    },
    //批量操作
    handleSelectionChange(val) {
        for (let i = 0; i < val.length; i++) {
            this.ids.push(val[i].saId)
        }
    },

    //单机事件(更改样式)
    updateCssOne(){
        this.one = "one2"
        this.two = "one3"
        this.three = "one3"
        this.four = "one3"
        this.status = null
        this.selAccountBystatus()
    },
    updateCssTwo(){
        this.one = "one3"
        this.two = "one2"
        this.three = "one3"
        this.four = "one3"
        this.status = 1
        this.selAccountBystatus()
    },
    updateCssThree(){
        this.one = "one3"
        this.two = "one3"
        this.three = "one2"
        this.four = "one3"
        this.status = 0
        this.selAccountBystatus()
    },
    updateCssFour(){
        this.one = "one3"
        this.two = "one3"
        this.three = "one3"
        this.four = "one2"
        this.status = 2
        this.selAccountBystatus()
    }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.one = "one2"
    this.selAccountBystatus()
    this.month = new Date()
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.one1:hover{
    border: 1px solid #5E91F2;
    color: #5E91F2;
}
.one2{
    border: 1px solid #5E91F2;
    color: #5E91F2;
}
.one3{

}
</style>
